<template>
	<view class="detail">
		<block v-if="boxHide">
			<view class="font_item">
				<view>设备名称</view><view>{{info.title}}</view>
			</view>
			<view class="font_item">
				<view>设备品牌</view><view class="font_item_edit">{{info.deviceBand}}</view>
			</view>
			<view class="font_item">
				<view>设备机号</view><view class="font_item_edit">{{info.machine_number}}</view>
			</view>
			<view class="font_item">
				<view>设备型号</view><view>{{info.module}}</view>
			</view>
			<view class="font_item">
				<view>设备编号</view><view class="font_item_code"><image src="/static/images/code.png"></image><text>{{info.number}}</text></view>
			</view>
			<view class="font_item">
				<view>安装日期</view><view>{{info.az_create_at}}</view>
			</view>
			<!-- <view class="font_border"></view> -->
			<view class="font_item">
				<view>累计开机时长</view><view>{{info.kj_date}}天</view>
			</view>
			<!-- <view class="font_item font_item1">
				<view>开机累计预警时长</view><view class="font_item_btn">{{info.yj_date}}天<text @tap="send()">推送告知</text></view>
			</view> -->
			<view class="font_border"></view>
			
			<view class="detail_title">维修保养记录</view>
			<block v-for="(item,index) in maintainList" key={index}>
				<view class="detail_item">
					<view class="detail_item_name">
						<view>{{item.create_at}}</view>
						<view>{{item.type}}</view>
					</view>
					<view class="detail_item_date">备注：{{item.desc}}</view>
				</view>
			</block>
			<view class="nodata" v-if="maintainList.length == 0">暂无数据</view>
		</block>
		
		<view class="bottom_btn">
			<view class="bottom_btn_list">
				<view @tap="go()" v-if="checkPermission([10006])">编辑</view>
			</view>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../../../components/loading/loading.vue"
	export default{
		components:{
			Loading
		},
		data(){
			return{
				info:{},
				boxHide:true,
				maintainList:[],
				deviceId: '', //客户id
				id:'',	// 设备id
			}
		},
		onLoad(options) {
			this.deviceId = options.deviceId;
			
			this.$refs.load.initLoading({loadType:1,loadPrompt:false}).then(res=>{
				this.$api.getClientEquipmentDetail({id:this.deviceId}).then(res => {
					this.info = res;
					this.$refs.load.getLoadingData({})
					this.id = res.id
					
				})
				
				this.$api.getDeviceRecord({customer_device_id:this.deviceId, page:1, rows:10}).then((res) => {		
					this.maintainList = res.data;
					this.$refs.load.getLoadingData({})
				})
			})
		},
		onShow() {
			
		},
		methods:{
			send(){
				this.$api.prompt("开发中~");
			},
			go(){//编辑
				uni.redirectTo({
					url:"/pages/client/info/equipmentAdd/equipmentAdd?deviceId=" + this.id
				})
			}
		}
	}
</script>

<style>
	page{padding-bottom: 90upx;}
	.detail{padding: 30upx 0;background: #FFFFFF;}
	.font_item1 view:nth-child(1){width: 230upx;}
	.detail_title{font-size: 28upx;color: #333;padding: 0 30upx;box-sizing: border-box;margin-top: 20upx;}
	
	.detail_item{width: 100%;padding: 0 30upx;box-sizing: border-box;margin-top: 20upx;}
	.detail_item_name{display: flex;flex-direction: row;align-items: center;font-size: 28upx;color: #333333;}
	.detail_item_name view:nth-child(2){width: 50upx;height: 28upx;line-height: 28upx;text-align: center;font-size: 20upx;color: #049BFF;border-radius: 4upx;border: 2upx solid #049BFF;margin-left: 20upx;}
	.detail_item_date{margin-top: 10upx;font-size: 28upx;color: #9BA7B7;}
</style>
